<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>poetry 后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" type="image/ico" href="/images/logo.png"/>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layui/css/common.css" media="all">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div th:replace="user/common::headerhtml"></div>
    <!-- <div th:replace="user/common::menuhtml"></div>-->
    <div class="layui-container">
        <!-- 内容主体区域 -->
        <div style="padding-top: 15px;">
            <div class="bly-panel" style="padding: 15px;">
                <div class="layui-btn-group demoTable">
                    <button class="layui-btn" data-type="add">新建用户</button>
                    <!-- <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
                     <button class="layui-btn" data-type="isAll">验证是否全选</button>-->
                </div>
                <table id="demo" class="layui-table" lay-filter="demo">

                </table>
                <script type="text/html" id="barDemo">
                    <!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> -->
                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>
            </div>
        </div>
    </div>

    <div th:replace="user/common::footerhtml"></div>
</div>
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/layui/menu.js" charset="utf-8"></script>
<script type="text/javascript">
    //JavaScript代码区域
    layui.use(['element', 'table', 'laydate', 'form', 'upload'], function () {
        var element = layui.element,
            table = layui.table,
            form = layui.form,
            upload = layui.upload,
            laydate = layui.laydate;

        //拖拽上传
        upload.render({
            elem: '#test10'
            , url: '/upload/imgUpLoad' //改成您自己的上传接口
            , field: 'editormd-image-file'
            , done: function (res) {
                if (res.success != 1) {
                    layer.alert(res.msg, {icon: 5});
                    return;
                }
                layer.msg('上传成功');
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.url);
                layui.$("#imgUrl").val(res.url);
                console.log(res)
            }
        });

        //第一个实例
        table.render({
            elem: '#demo'
            , id: "dataTable"
            , url: '/user/list' //数据接口
            , method: 'post'
            , page: true //开启分页
            , cols: [
                [ //表头
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'userName', title: '账号', width: 180}
                    , {field: 'nickName', title: '昵称', width: 180}
                    , {
                    field: 'imgUrl', title: '头像', width: 180, event: 'setSign', templet: function (row) {

                        return '<img src="' + row.imgUrl + '" style="width: 30px;height: 30px;border-radius: 50%;"/>&nbsp;&nbsp;点击查看';
                    }
                }
                    , {field: 'createTime', title: '创建时间', width: 177}
                    , {
                    field: 'status', title: '状态', width: 80, templet: function (row) {
                        if (row.status === 0) {
                            return '正常';
                        } else {
                            return '异常';
                        }
                    }
                }
                    , {fixed: 'right', width: 178, align: 'center', toolbar: '#barDemo'}
                ]
            ],
            response: {
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function (res) {
                return {
                    'code': res.status,
                    'msg': res.msg,
                    'count': res.data.total,
                    'data': res.data.list
                };
            }
        });


        //监听表格复选框选择
        table.on('checkbox(demo)', function (obj) {
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                /*   layer.msg('ID：' + data.id + ' 的查看操作');*/
            } else if (obj.event === 'del') {
                layer.confirm('真的删除么', function (index) {
                    $.ajax({
                        url: '../user/del',
                        type: 'post',
                        dataType: 'json',
                        data: {id: data.id},
                        success: function (result) {
                            if (result.status !== 200) {
                                layer.alert(result.msg);
                                return;
                            }
                            obj.del();
                            layer.close(index);
                        }
                    });

                });
            } else if (obj.event === 'edit') {
                //layer.alert('编辑行：<br>' + JSON.stringify(data))
                layer.open({
                    type: 1
                    , title: "编辑用户"
                    , area: '600px'
                    , shade: 0.2
                    , id: 'LAY_layuiprouserdeit' //设定一个id，防止重复弹出
                    , btn: ['提交', '取消']
                    , btnAlign: 'c'
                    , moveType: 1 //拖拽模式，0或者1
                    , content: $("#formDom")
                    , success: function (layero, index) {
                        //获取新窗口对
                        form.render();
                        var checkStatus = table.checkStatus('dataTable');
                        var datas = checkStatus.data;
                        /*if (datas.length !== 1) {
                            layer.close(index);
                            layer.alert("请选择一条数据");
                            return;
                        }
                        var data = datas[0];*/

                        form.val('example', data);
                        $("#uploadDemoView img").attr("src",data.imgUrl);
                        $("#uploadDemoView").removeClass("layui-hide");
                        $("#password").hide();
                    }
                    , yes: function () {
                        form.verify();
                        let data = form.val('example');
                        $.ajax({
                            url: '../user/save',
                            type: 'post',
                            dataType: 'json',
                            data: data,
                            success: function (result) {
                                if (result.status !== 200) {
                                    layer.alert(result.msg);
                                    return;
                                }
                                layer.closeAll();
                                layer.alert("保存成功");
                                reload()
                            }
                        });
                    }
                });

            } else if (obj.event === 'setSign') {
                layer.open({
                    type: 1,
                    area: ['450px', '450px'],
                    title: false,
                    closeBtn: 0,
                    skin: 'layui-layer-nobg', //没有背景色
                    shadeClose: true,
                    content: '<img src="' + data.imgUrl + '" style="width: 450px;height: 450px;border-radius: 100%;"/>'
                });
            }
        });
        //监听单元格事件
        table.on('tool(demoEvent)', function (obj) {
            var data = obj.data;
            if (obj.event === 'setSign') {
                layer.prompt({
                    formType: 2
                    , title: '修改 ID 为 [' + data.id + '] 的用户签名'
                    , value: data.sign
                }, function (value, index) {
                    layer.close(index);

                    //这里一般是发送修改的Ajax请求

                    //同步更新表格和缓存对应的值
                    obj.update({
                        sign: value
                    });
                });
            }
        });

        laydate.render({
            elem: 'input[name=createTime]' //或 elem: document.getElementById('test')、elem: lay('#test') 等
            , format: 'yyyy-MM-dd HH:mm:ss'
            , value: new Date()
        });
        /*laydate.render({
            elem: 'input[name=actualTime]'
            , format: 'yyyy-MM-dd HH:mm:ss'
            , value: new Date()
        });*/

        //重新加载列表数据
        function reload(param){
            let where=$.extend({},param||{});
            let page={
                page: {
                    curr: 1 //重新从第 1 页开始
                }, where: where
            };
            //执行重载
            table.reload('dataTable',page,'data');
        }

        var $ = layui.$, active = {
            add: function () {
                $('#formDom')[0].reset();
                layer.open({
                    type: 1
                    , title: "添加用户"
                    , area: '600px'
                    , shade: 0.2
                    , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    , btn: ['提交', '取消']
                    , btnAlign: 'c'
                    , moveType: 1 //拖拽模式，0或者1
                    , content: $("#formDom") /** 注意：DOM一定要放在body之外的地方，否则你会崩溃！！！！！**/
                    , success: function (layero) {
                        //获取新窗口对
                        //form.render();
                        /*laydate.render([{
                            elem: 'input[name=startTime]' //或 elem: document.getElementById('test')、elem: lay('#test') 等
                            , format: 'yyyy-MM-dd HH:mm:ss'
                            , value: new Date()
                        }, {
                            elem: 'input[name=actualTime]'
                            , format: 'yyyy-MM-dd HH:mm:ss'
                        }]);*/
                    }
                    , yes: function () {
                        form.verify();
                        let data = form.val('example');
                        $.ajax({
                            url: '../user/save',
                            type: 'post',
                            dataType: 'json',
                            data: data,
                            success: function (result) {
                                if (result.status !== 200) {
                                    layer.alert(result.msg);
                                    return;
                                }
                                layer.closeAll();
                                layer.alert("保存成功");
                                reload()

                            }
                        });
                    }
                });
            },
            getCheckData: function () { //获取选中数据
                var checkStatus = table.checkStatus('idTest')
                    , data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            , getCheckLength: function () { //获取选中数目
                var checkStatus = table.checkStatus('idTest')
                    , data = checkStatus.data;
                layer.msg('选中了：' + data.length + ' 个');
            }
            , isAll: function () { //验证是否全选
                var checkStatus = table.checkStatus('idTest');
                layer.msg(checkStatus.isAll ? '全选' : '未全选')
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>

<form class="layui-form" action="" lay-filter="example" id="formDom" style="display: none;margin-top: 15px;">
    <input type="text" name="id" style="display: none" value="">
    <div class="layui-form-item">
        <label class="layui-form-label">用户账号</label>
        <div class="layui-input-block">
            <input type="text" name="userName" lay-verify="required" lay-reqtext="不能为空！" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户昵称</label>
        <div class="layui-input-block">
            <input type="text" name="nickName" lay-verify="required" lay-reqtext="不能为空！" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" id="password">
        <label class="layui-form-label">用户密码</label>
        <div class="layui-input-block">
            <input type="text" name="password" lay-verify="required" lay-reqtext="不能为空！" placeholder="请输入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户状态</label>
        <div class="layui-input-block">
            <!-- <input type="text" name="state" lay-verify="required" lay-reqtext="不能为空！" placeholder="请输入"
                    autocomplete="off" class="layui-input">-->
            <select name="status" lay-filter="aihao">
                <option value="0">正常</option>
                <option value="1">异常</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择头像</label>
        <!-- <div class="layui-input-block">
             <input type="text" name="imgUrl" lay-verify="required" lay-reqtext="不能为空！" placeholder="请输入"
                    autocomplete="off" class="layui-input">
         </div>-->
        <div class="layui-upload-drag" id="test10">
            <i class="layui-icon"></i>
            <p>上传头像，或将文件拖拽到此处</p>
            <div class="layui-hide" id="uploadDemoView">
                <hr>
                <input type="hidden" id="imgUrl" name="imgUrl" value="">
                <img src=""  name="" alt="上传成功后渲染" style="max-width: 196px">
            </div>
        </div>
    </div>
</form>
</html>
